<template>
	<view class="pet-center">
		
		<uv-navbar leftText="返回" :fixed="false" title="宠物档案" :safeAreaInsetTop="false" @leftClick="leftClick">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19"></uv-icon>
					<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
					<uv-icon name="home" size="20"></uv-icon>
				</view>
			</template>
			<template v-slot:right>
				<view class="uv-nav-slot">
					<uv-icon name="plus-circle" size="19"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		
		<uv-row>
			<uv-col span="1" offset="1">
				<uv-icon name="arrow-left" size="30" class="left-icon" @click="leftPage"></uv-icon>
			</uv-col>
			<uv-col span="1" offset="8">
				<uv-icon name="arrow-right" size="30" class="right-icon" @click="rightPage"></uv-icon>
			</uv-col>
		</uv-row>
		
		<unicloud-db ref="petUdb" #default="{data}" collection="pet-pets"
			field="name, header, photos, priority, type, birthday, deathday, status" 
			:where="swhere">
				<photo-label v-for="pet in data" :pet="pet" class="photo-item"></photo-label>
				<name-label v-for="pet in data" :pet="pet" class="name-item"></name-label>
				<info-label v-for="pet in data" :pet="pet" class="info-item"></info-label>
		</unicloud-db>
		
	</view>
</template>

<script setup lang="ts">
	
	import { ref, computed, nextTick } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	const petUdb = ref(null)
	const num = ref(1)
	const swhere = computed(() => 'owner_id==$cloudEnv_uid && priority==' + num.value)

	onShow(() => {
		nextTick(() => {
			petUdb.value.refresh()
		});
	})
	const leftClick = () => {
		uni.reLaunch({
			url: '/pages/user-center/user-center'
		})
	}
	const leftPage = () => {
		num.value--
		console.log(num)
		petUdb.value.refresh()
	}
	const rightPage = () => {
		num.value++
		console.log(num)
		petUdb.value.refresh()
	}
</script>

<style scoped lang="scss">
	.pet-center{
		width: 750rpx;
		height: 1900rpx;
		background: #ebe0e2;
		.name-item{
			top: -30rpx;
		}
		.left-icon{
			position: absolute;
			z-index: 1;
			top: 730rpx;
		}
		.right-icon{
			position: absolute;
			z-index: 1;
			top: 730rpx;
		}
	}
	@mixin flex($direction: row) {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: $direction;
		}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>